<template>
  <Scroll :list="albumList" :top="139" :bottom="20" ref="albumscroll">
    <div>
      <AlbumList :albumList="albumList" @to-album-detail="toAlbumDetailPage" @img-load-end="imgLoadEnd"></AlbumList>
    </div>
  </Scroll>
</template>

<script>
  import AlbumList from '@/components/main/album/AlbumList'
  import { mapState,mapMutations,mapGetters } from 'vuex'
  import Scroll from '@/components/scroll'
  export default {
    data() {
      return {
        //专辑数据
        albumList: []
      }
    },
    created() {
      this.getAlbumList()

    },
    methods: {
      ...mapMutations(['SET_ALBUM_DETAIL','SET_ALBUM_SONG']),
      ...mapGetters(['GET_ALBUM_DETAIL','GET_ALBUM_SONG']),
      //获取专辑列表
      async getAlbumList() {
        const { data: res } = await this.$http.get('/album/newest')
        this.albumList = res.albums

      },
      async toAlbumDetailPage(id) {
        const { data: res } = await this.$http.get('/album',{params: { id: id }})
        this.SET_ALBUM_DETAIL(res.album)
        this.SET_ALBUM_SONG(res.songs)
        this.$router.push('/albumdetail')
      },
      imgLoadEnd(){
        this.$nextTick(() => {
          this.$refs.albumscroll.refresh()
        })
      }
    },
    components: {
      AlbumList,
      Scroll
    },
    computed: {
      ...mapState(['albumDetailList'])
    },
    watch: {
      albumsObj() {
        this.$nextTick(() => {
          this.$refs.albumscroll.refresh()
        })
      }
    }
  }
</script>

<style>
</style>
